<!-- 简单的 添加 编辑 查看 弹框 -->
<template>
  <div>
    <a-modal
      style="width: 50%"
      v-bind:open="isModalVisible"
      :title="modaltitle"
      ok-text="保存"
      cancel-text="取消"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form ref="formRef" :model="formInline" :rules="rules" class="formStyle">
        <a-form-item label="厂家编号:" ref="changjiabianhao" name="changjiabianhao">
          <a-input
            v-model="formInline.changjiabianhao"
            placeholder="请输入"
            clearable
          />
        </a-form-item>
        <a-form-item label="厂家名称:" ref="changjiamingcheng" name="changjiamingcheng">
          <a-input
            v-model="formInline.changjiamingcheng"
            placeholder="请输入"
            clearable
          />
        </a-form-item>
        <a-form-item label="联系人:" ref="lianxiren" name="lianxiren">
          <a-input
            v-model="formInline.lianxiren"
            placeholder="请输入"
            clearable
          />
        </a-form-item>
        <a-form-item label="联系电话:" ref="lianxidianhua" name="lianxidianhua">
          <a-input
            v-model="formInline.lianxidianhua"
            placeholder="请输入"
            clearable
          />
        </a-form-item>
        <a-form-item label="地址:" class="noRules">
          <a-input v-model="formInline.dizhi" placeholder="请输入" clearable />
        </a-form-item>
        <a-form-item label="主要产品:" class="noRules">
          <a-textarea v-model:value="formInline.zhuyaochanpin" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  const formInline = ref({})
  const formRef = ref(null)
  //父组件传过来的数据
  const props = defineProps({
    isModalVisible: {
      typeof: Boolean,
    },
    modaltitle: {
      type: String,
    },
  })
  const rules = {
    changjiabianhao: [
      { required: true, message: '请输入厂家编号', trigger: 'blur' },
    ],
    changjiamingcheng: [
      { required: true, message: '请输入厂家名称', trigger: 'blur' },
    ],
    lianxiren: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    lianxidianhua: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],

  }
  // 调用的方法
  const emitModal = defineEmits(['cancel', 'ok'])
  //保存按钮
  const handleOk = () => {
    // props.isModalVisible = false;
    emitModal('ok', 111111)
    formRef.value.resetFields();
  }

  //取消按钮
  const handleCancel = () => {
    // props.isModalVisible = false;
    emitModal('cancel')
    formRef.value.resetFields();
  }
</script>
<style scoped>
.formStyle {
    width: 80%;
   margin: 0 auto;
}
.noRules {
    margin-left: 12px;
}
</style>
